<template>
  <div class="repair-standard">
    <el-card>
      <div class="header-row">
        <el-input
          v-model="searchText"
          placeholder="输入关键词搜索（名称/设备/内容/要点）"
          clearable
          style="width:350px; font-size:16px; margin-right:24px;"
        />
        <el-button type="primary" @click="handleAdd">新增规范</el-button>
      </div>
      <el-table :data="filteredList" border style="width:100%;" :fit="true">
        <el-table-column prop="name" label="规范名称"/>
        <el-table-column prop="device" label="适用设备"/>
        <el-table-column prop="scene" label="适用场景"/>
        <el-table-column prop="content" label="核心内容"/>
        <el-table-column prop="safety" label="安全要点"/>
        <el-table-column prop="remark" label="备注"/>
        <el-table-column label="操作" align="center" width="140">
          <template #default="scope">
            <el-button size="small" text type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" text type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="editVisible" :title="editTitle" width="600px" destroy-on-close>
      <el-form :model="editRow" :rules="formRules" ref="formRef" label-width="110px">
        <el-form-item label="规范名称" prop="name">
          <el-input v-model="editRow.name"/>
        </el-form-item>
        <el-form-item label="适用设备" prop="device">
          <el-input v-model="editRow.device"/>
        </el-form-item>
        <el-form-item label="适用场景" prop="scene">
          <el-input v-model="editRow.scene"/>
        </el-form-item>
        <el-form-item label="核心内容" prop="content">
          <el-input v-model="editRow.content" type="textarea"/>
        </el-form-item>
        <el-form-item label="安全要点" prop="safety">
          <el-input v-model="editRow.safety" type="textarea"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editRow.remark" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible=false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="deleteVisible" title="提示" width="320px" center>
      <div>确定要删除该修复规范吗？</div>
      <template #footer>
        <el-button @click="deleteVisible=false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

interface RepairStandardItem {
  id: number
  name: string
  device: string
  scene: string
  content: string
  safety: string
  remark: string
}

let idSeed = 1
const standardList = ref<RepairStandardItem[]>([
  {
    id: idSeed++,
    name: '管道泄漏修复规范',
    device: '市政供水管道',
    scene: '漏点检测与紧急抢修',
    content: '1. 关闭相关阀门 2. 标记漏点 3. 切割、清理破损段 4. 更换/加固修复 5. 恢复供水并检查。',
    safety: '作业时佩戴防护装备，防止二次漏水和滑倒。',
    remark: '应急修复后需做压力测试。'
  },
  {
    id: idSeed++,
    name: '土壤污染修复规范',
    device: '修复设备/土壤改良剂',
    scene: '有机污染地块修复',
    content: '1. 采样检测 2. 现场围挡 3. 投加改良剂 4. 深翻混合 5. 监测达标后移除防护。',
    safety: '操作区严禁无关人员入内，防止二次污染扩散。',
    remark: '全部作业记录需留档。'
  },
  {
    id: idSeed++,
    name: '电气设备修复标准',
    device: '配电箱/变压器',
    scene: '故障诊断与修复',
    content: '1. 断电确认 2. 故障检测 3. 更换损坏元件 4. 恢复接线 5. 上电调试。',
    safety: '操作全程戴绝缘手套，两人互保作业。',
    remark: '修复后须做耐压测试。'
  },
  {
    id: idSeed++,
    name: '结构加固修复',
    device: '建筑梁柱',
    scene: '结构损伤修复',
    content: '1. 评估受损部位 2. 临时支撑 3. 表面清理 4. 粘贴加固材料 5. 检查加固效果。',
    safety: '加固期间防止荷载集中，防止意外倒塌。',
    remark: '加固材料需按设计要求使用。'
  }
])

const searchText = ref('')
const filteredList = computed(() =>
  searchText.value
    ? standardList.value.filter(row =>
        row.name.includes(searchText.value) ||
        row.device.includes(searchText.value) ||
        row.scene.includes(searchText.value) ||
        row.content.includes(searchText.value) ||
        row.safety.includes(searchText.value)
      )
    : standardList.value
)

// 新增/编辑弹窗
const editVisible = ref(false)
const editTitle = ref('新增规范')
const editRow = reactive<RepairStandardItem>({
  id: 0,
  name: '',
  device: '',
  scene: '',
  content: '',
  safety: '',
  remark: ''
})
const formRef = ref()
const formRules = {
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  device: [{ required: true, message: '必填', trigger: 'blur' }],
  scene: [{ required: true, message: '必填', trigger: 'blur' }],
  content: [{ required: true, message: '必填', trigger: 'blur' }],
  safety: [{ required: true, message: '必填', trigger: 'blur' }]
}
function handleAdd() {
  editTitle.value = '新增规范'
  Object.assign(editRow, { id: 0, name: '', device: '', scene: '', content: '', safety: '', remark: '' })
  editVisible.value = true
}
function handleEdit(row: RepairStandardItem) {
  editTitle.value = '编辑规范'
  Object.assign(editRow, row)
  editVisible.value = true
}
function submitEdit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    if (editTitle.value.startsWith('编辑')) {
      const idx = standardList.value.findIndex(t => t.id === editRow.id)
      if (idx !== -1) standardList.value[idx] = { ...editRow }
      ElMessage.success('编辑成功')
    } else {
      standardList.value.unshift({ ...editRow, id: idSeed++ })
      ElMessage.success('新增成功')
    }
    editVisible.value = false
  })
}

// 删除弹窗
const deleteVisible = ref(false)
const deleteTarget = ref<RepairStandardItem | null>(null)
function handleDelete(row: RepairStandardItem) {
  deleteTarget.value = row
  deleteVisible.value = true
}
function confirmDelete() {
  if (deleteTarget.value) {
    standardList.value = standardList.value.filter(t => t.id !== deleteTarget.value!.id)
    ElMessage.success('删除成功')
  }
  deleteVisible.value = false
}
</script>

<style scoped>
.repair-standard {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

/* 表格内容自动换行不溢出 */
::v-deep .el-table .cell {
  white-space: normal !important;
  word-break: break-all;
  line-height: 1.8;
  font-size: 15px;
}
</style>
